<template>
<div class="home">
  <Row :gutter="20">
	  <Col :sm="12" :md="8" :xxl="4" style="height: 180px;padding-bottom: 10px;">
		  <Card title="新增用户" :padding="0" style="height:100%">
		  <template #extra><Tag color="lime">月</Tag></template>
			  <infor-card shadow color="#2d8cf0" icon="md-person-add" :icon-size="36">
				  <CountUp :end="803" :duration="2" v-font="50" /><br>
				  <Trend flag="up"> 同比 12.5%</Trend>
        	  </infor-card>
		  </Card>
	  </Col>
	  <Col :sm="12" :md="8" :xxl="4" style="height: 180px;padding-bottom: 10px;">
		  <Card title="新增商户" :padding="0" style="height:100%">
		  <template #extra><Tag color="gold">年</Tag></template>
			  <infor-card shadow color="#19be6b" icon="md-locate" :icon-size="36">
				  <CountUp :end="142" :duration="2" v-font="50" /><br>
				  <Trend flag="down"> 同比 24%</Trend>
        	  </infor-card>
		  </Card>
	  </Col>
	  <Col :sm="12" :md="8" :xxl="4" style="height: 180px;padding-bottom: 10px;">
		  <Card title="新增案件" :padding="0" style="height:100%">
		  <template #extra><Tag color="lime">月</Tag></template>
			  <infor-card shadow color="#ff9900" icon="ios-book" :icon-size="36">
				  <CountUp :end="82" :duration="2" v-font="50" /><br>
				  <Trend flag="down"> 同比 15%</Trend>
        	  </infor-card>
		  </Card>
	  </Col>
	  <Col :sm="12" :md="8" :xxl="4" style="height: 180px;padding-bottom: 10px;">
		  <Card title="新增车辆登记" :padding="0" style="height:100%">
		  <template #extra><Tag color="gold">年</Tag></template>
			  <infor-card shadow color="#E46CBB" icon="ios-car" :icon-size="36">
	          	 <CountUp :end="657" :duration="2" v-font="50" /><br>
	          	 <Trend flag="down"> 同比 16%</Trend>
	          	<!--<i-circle :percent="80" dashboard :size="80">
			        <span class="demo-circle-inner" style="font-size:24px">80%</span>
			    </i-circle> -->
        	  </infor-card>
 		  </Card>
	  </Col>
	  <Col :sm="24" :md="16" :xxl="8" style="height: 180px;padding-bottom: 10px;">
		  <Card title="系统访问量" :padding="0" style="height:100%">
		  <template #extra><Tag color="green">周</Tag></template>
		
	          	<Example style="height: 120px;"/>
        	
 		  </Card>
	  </Col>
  </Row>
  <Row :gutter="20">
   <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
     <Card>
       <chart-pie style="height: 300px;" :value="pieData" text="商户行业类型"></chart-pie>
     </Card>
   </i-col>
   <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
     <Card>
       <chart-bar style="height: 300px;" :value="barData" text="每月案件处理数量"/>
     </Card>
   </i-col>
 </Row>
</div>
</template>

<script>

import { ChartPie, ChartBar } from '@/components/charts'
import InforCard from '@/components/infor-card'
import Example from './example.vue'
export default {
  name: 'HomeView',
  components: {
	  ChartPie,ChartBar,InforCard,Example
  },
  data(){
	  return {
		  inforCardData: [
	        { title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
	        { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
	        { title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
	        { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
	        { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
	        { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
	      ],
		  pieData: [
	        { value: 335, name: '旅店业' },
	        { value: 310, name: '餐饮业' },
	        { value: 234, name: '娱乐服务业' },
	        { value: 135, name: '医疗行业' },
	        { value: 1548, name: '商场、沿街门店' }
	      ],
	      barData: {
	        "1月": 13253,
	        "2月": 34235,
	        "3月": 26321,
	        "4月": 12340,
	        "5月": 24643,
	        "6月": 28643,
	        "7月": 32643,
	        "8月": 36643,
	        "9月": 26643,
	        "10月": 23643,
	        "11月": 18673,
	        "12月": 4643
	      }
	  }
  }
}
</script>
<style>
</style>